<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="套餐日志" ref="navbar"></fa-navbar>
		<view class="content" style="overflow-y: hidden;margin: 15px auto;width: 90%;">
			<!-- <view class="_ac_con">
				<view class="_con_li" v-for="(item, index) in commentList" :key="index">
					{{ item.con_log }}
				</view>
			</view> -->
			<view class="content_div" style="width: 600px">
				<!-- 表头 -->
				<view class="header">
					<view class="cell" style="width: 20%">时间</view>
					<view class="cell" style="width: 25%">名称</view>
					<!-- <view class="cell" style="width: 10%">数量</view> -->
					<view class="cell" style="width: 20%">价格</view>
					<view class="cell" style="width: 35%">商品</view>
				</view>
				<!-- 数据行 -->
				<view class="row" v-for="(item, index) in commentList" :key="index">
					<view class="cell" style="width: 20%">{{ item.createtime }}</view>
					<view class="cell" style="width: 25%">{{ item.tc_name }}</view>
					<!-- <view class="cell" style="width: 10%">{{ item.num }}</view> -->
					<view class="cell" style="width: 20%">{{ item.price }}</view>
					<view class="cell" style="width: 35%">{{ item.goods_name }}</view>
					
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.bgColor}" :custom-style="{backgroundColor:lightColor}"></u-back-top>
		<!-- 为空 -->
		<view class="u-m-t-60 u-p-t-60 u-p-b-60" v-if="is_empty">
			<u-empty text="暂无数据.." mode="list"></u-empty>
		</view>
		<!-- 更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="commentList.length"  @click="jiazai">
			<u-loadmore :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				commentList: [],
				page: 1,
				has_more: false,
				status: 'loadmore',
				scrollTop: 0,
				is_empty: false,
			};
		},
		onLoad() {
			this.getMytaoclog();
		},
		methods: {
			// 评论列表
			getMytaoclog: async function() {
				let res = await this.$api.getMytaoclog({
					page: this.page
				});
				console.log(res,'res')
				this.status = 'loadmore';
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.commentList = this.commentList.concat(res.data.commentList);
				
				if(res.data.commentList.length<30){
					this.has_more = false;
				}else{
					this.has_more = true;
				}
				this.is_empty = !this.commentList.length;
			},
			goDetail(item) {
				let page = item.model_id == 2 ? '/pages/product/detail' : '/pages/article/detail';
				this.goPage(page + '?id=' + item.id);
			},
			jiazai(){
				if (this.has_more) {
					this.status = 'loading';
					this.page++;
					this.getMytaoclog();
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//底部加载更多
		onReachBottom() {
			if (this.has_more) {
				this.status = 'loading';
				this.page++;
				this.getMytaoclog();
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	._btn{
		border: none;
		background: #e0ebdd;
		line-height: 34px;
		font-size: 14px;
		font-family: '微软雅黑';
	}
	.article {
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		width: 100vw;

		.left {
			image {
				width: 200rpx;
				height: 150rpx;
				flex: 0 0 120rpx;
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;

			.content {
				margin-bottom: 10rpx;

				.flag {
					display: inline-block;
				}
			}
		}
	}
	
	.c_date_left{
		width: 29%;float: left;font-size: 14px;line-height: 35px;text-align: center;
	}
	.c_date_right{
		width: 70%;float: left;line-height: 35px;
	}
	.u-bg-white{
		background: #f9f9f9;
	}
	.uni-select {
		border: none!important;
	}
	.container {
	  padding: 20rpx;
	  background-color: #ffffff;
	}
	
	.header, .row {
	  display: flex;
	  flex-wrap: nowrap;
	  border-bottom: 1rpx solid #e0e0e0;
	}
	
	.header {
	  background-color: #e0ebdd;
	  font-weight: bold;
	}
	
	.cell {
	  padding: 20rpx 10rpx;
	  border-right: 1rpx solid #e0e0e0;
	  font-size: 14px;
	  color: #333;
	  text-align: center;
	  line-height: 32px;
	  font-weight: normal;
	  font-family: '微软雅黑';
	}
	
	.last {
	  border-right: none !important;
	}
	
	/* 适配不同屏幕尺寸 */
	@media (max-width: 375px) {
	  .cell {
	    font-size: 24rpx;
	    padding: 15rpx 8rpx;
	  }
	}
	
	._ac_con{
		width: 100%;
	}
	._con_li{
		width: 100%;line-height: 36px;font-size: 14px;color: #65686d;
		border-bottom: 1px solid #e1e1e1;
	}
	
</style>
